<!--
  管理员用户管理组件
-->
<script>
export default {
  name: "AdminSetting",
  data() {
    return {
      // 所有权限集合
      adminRoleList: [],
      formLabelWidth: '140px',
      dialogFormTitle: '编辑',
      dialogFormVisible: false,
      adminUserData: [],
      adminInfo: {
        adminId: '',
        adminName: '',
        adminRole: '',
      },
    }
  },
  created() {
    this.findAllUser()
  },
  methods: {
    // 查询所有管理员用户
    findAllUser() {
      this.$http.get('/user/findAllAdminUser').then(res => {
        console.info(res)

        this.adminUserData = res.data;
      })
    },
    // 编辑
    edit(row) {
      console.log("row编辑")
      console.info(row)
      this.findAdminRoleList();
      // row.adminRole === '超级管理员' ? this.adminInfo.adminRole = 1 : this.adminInfo.adminRole = 2;
      this.adminInfo.adminRole = row.adminId
      this.adminInfo.adminId = row.adminId;
      this.adminInfo.adminName = row.adminName;
      this.dialogFormVisible = true
    },
    // 查询所有权限
    findAdminRoleList() {
      this.$http.get('/user/findAdminRoleList').then(res => {
        this.adminRoleList = res.data;
      })
    },
    // 编辑模态框的提交
    editModulePut() {
      console.log("编辑模态框提交")
      console.info(this.adminInfo)
      this.$http.post('/user/updateRoleByAdminId', {userId: this.adminInfo.adminId, roleId: this.adminInfo.adminRole})
          .then(res => {
            if (res.data.msg === 1) {
              this.findAllUser();
            } else {
              this.$message.error('修改失败');
            }

          })
      this.dialogFormVisible = false
    }
  }

}
</script>

<template>
  <div>
    <!-- 编辑商品模态框 开始 -->
    <el-dialog
        width="500px"
        :title="dialogFormTitle"
        :visible.sync="dialogFormVisible">
      <el-form :model="adminInfo">

        <el-form-item label="管理员名称" :label-width="formLabelWidth">
          <el-input v-model="adminInfo.adminName" autocomplete="off" class="formInput"/>
        </el-form-item>

        <el-form-item label="管理员权限" :label-width="formLabelWidth">
          <el-select v-model="adminInfo.adminRole" placeholder="用户权限" class="formInput">
            <el-option :label="item.name" :value="item.roleId"
                       v-for="item in adminRoleList" :key="item.roleId"/>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible=false">取 消</el-button>
    <el-button type="primary" @click="editModulePut()">确 定</el-button>
  </span>
    </el-dialog>
    <!-- 编辑商品模态框 结束 -->
    <el-table :data="adminUserData" style="width: 100%">
      <el-table-column prop="adminId" label="编号" width="120"/>
      <el-table-column prop="adminName" label="管理员" width="150"/>
      <el-table-column prop="roleName" label="职位" width="150"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>

</style>